jQuery の jqDock プラグインで作る Mac OS X 風ドックメニュー

jQuery のjqDock プラグインの、導入方法や主要なオプションについて。
jQuery の jqDock プラグインは、ドックメニューを、WEBに実装できるプラグイン。メニュー画像に、マウスのカーソルを合わせると、そのメニュー画像が大きくなる。

導入

jqDock : a jQuery pluginより、最新バージョンの jqDock プラグインをダウンロード。

読み込み例

ファイルへのパスは、それぞれ、アップロードした場所を指定する。

実装例（サンプル）

実装例（サンプル）の動作について

それぞれのメニュー画像に、マウスのカーソルを合わせると、そのメニュー画像が大きくなる。例えば、「BLOG」のメニュー画像に、マウスのカーソルを合わせると、「BLOG」のメニュー画像が大きくなる。

実装例（サンプル）のソースコード

読み込み

jquery.js と jquery.jqDock.js を読み込む。
ファイルへのパスは、それぞれ、アップロードした場所を指定する。

JavaScript

オプションは、何も指定せず、初期設定値（デフォルト）のままの場合。

CSS

重ならないように、マージンを入れたが、重なっても構わない場合は、マージンを指定する必要はない。

HTML

画像ファイルへのパスは、それぞれ、アップロードした場所を指定する。

オプション

jqDock プラグインには、多くのオプションが用意されている。その中の、主要なオプションについて。
オプション名や説明に貼ってあるリンクは、実装例（サンプル）ページへのリンク。

align

水平、垂直、及び、揃える位置を指定するオプション。

水平：top（上揃え）、middle（中央揃え）、bottom（下揃え）

垂直：left（左揃え）、center（中央揃え）、right（右揃え）

初期設定値は、bottom（下揃え）。

distance

カーソルにメニュー画像が反応する距離。

初期設定値は、「72」。

size

最初に表示するメニュー画像の大きさ。

初期設定値は、「48」。

labels

メニュー画像上にラベルを表示する位置。

初期設定値は、「Off」で、表示しないようになっている。

duration

メニュー画像を、最初に拡大するときと、最後に縮小するときに、掛ける時間。

ミリ秒(ms)単位。

初期設定値は、「300」。